<template>
  <view>
    <view class="header">
      <view class="header_img">
        <image src="/static/workOverTime/ico_avator_@2x.png" style="width: 100%; height: 100%;"></image>
        <!--				<image src="../../static/workOverTime/ico_avator_@2x.png" style="width: 100%; height: 100%;"></image>-->
      </view>
      <view style="width: 80%;">
        <view class="header_name">{{ listDetail.title }}</view>
        <view class="header_status">
          <view v-if="listDetail.result == 1">申请状态: 审批中</view>
          <view v-if="listDetail.result == 10">申请状态: 已审批</view>
          <view v-if="listDetail.result == 20">申请状态: 未通过</view>
          <view v-if="listDetail.result == 30">申请状态: 待审批</view>
        </view>
      </view>
    </view>
    <view class="baseMsg">
      <view class="baseMsg_header">
        <view class="baseMsg_header_img">
          <image src="/static/workOverTime/ico_page_@2x.png" style="width: 100%; height: 100%;"></image>
        </view>
        <view class="baseMsg_header_title">
          基础信息zhy
        </view>
      </view>
      <view class="baseMsg_item">
        <view class="baseMsg_item_title">申请人</view>
        <view class="baseMsg_content">{{ listDetail.username }}</view>
      </view>
      <view class="baseMsg_item">
        <view class="baseMsg_item_title">所在部门</view>
        <view v-if="department" class="baseMsg_content">{{ department.name }}</view>
        <!-- #ifdef MP-WEIXIN -->
        <view v-if="department.length == 0">无</view>
        <!-- #endif -->
        <view v-if="!department">无</view>
      </view>
      <view class="baseMsg_item">
        <view class="baseMsg_item_title">申请类型</view>
        <view v-if="type==1" class="baseMsg_content">加班申请</view>
        <view v-if="type==2" class="baseMsg_content">{{ leaveTitle }}申请</view>
        <view v-if="type==3" class="baseMsg_content">出差申请</view>
        <view v-if="type==4" class="baseMsg_content">外出申请</view>
        <view v-if="type==5" class="baseMsg_content">补卡申请</view>
      </view>
      <view class="baseMsg_item">
        <view class="baseMsg_item_title">申请时间</view>
        <view class="baseMsg_content">{{ listDetail.create_date | yearMonthDateMin }}</view>
      </view>
    </view>
    <view style="background-color: #FFFFFF; padding-bottom: 20rpx;">
      <view class="baseMsg_detail">
        <view class="baseMsg_header">
          <view class="baseMsg_header_img">
            <image src="/static/workOverTime/ico_page_@2x.png" style="width: 100%; height: 100%;"></image>
          </view>
          <view class="baseMsg_header_title">
            详情信息
          </view>
        </view>
        <view class="baseMsg_item">
          <view class="baseMsg_item_title" v-if="type==1">加班事项</view>
          <view class="baseMsg_item_title" v-if="type==2">请假事项</view>
          <view class="baseMsg_item_title" v-if="type==3">出差事项</view>
          <view class="baseMsg_item_title" v-if="type==4">外出事项</view>
          <view class="baseMsg_item_title" v-if="type==5">补卡理由</view>
          <view class="baseMsg_content">{{ listDetail.explain }}</view>
        </view>
        <template v-if="type != 5">
          <view>
            <view class="baseMsg_item">
              <view class="baseMsg_item_title">开始时间</view>
              <view class="baseMsg_content">{{ listDetail.start_time }}</view>
            </view>
            <view class="baseMsg_item">
              <view class="baseMsg_item_title">结束时间</view>
              <view class="baseMsg_content">{{ listDetail.end_time }}</view>
            </view>
            <view class="baseMsg_item">
              <view v-if="type==1 || type == 4 || type == 5" class="baseMsg_item_title">
                <view>时长(小时)</view>
              </view>
              <view v-else-if="type == 3" class="baseMsg_item_title">
                <view>出差天数</view>
              </view>
              <view v-else-if="type == 2" class="baseMsg_item_title">
                <view v-if="listDetail.leaveid == 1 || listDetail.leaveid == 3 || listDetail.leaveid == 4">时长(小时)
                </view>
                <view v-if="listDetail.leaveid == 2 || listDetail.leaveid == 5">时长(天)</view>
              </view>
              <view class="baseMsg_content">{{ listDetail.totals }}</view>
            </view>
            <view class="baseMsg_item">
              <view class="baseMsg_item_title">备注</view>
              <view v-if="listDetail.remarks" class="baseMsg_content">{{ listDetail.remarks }}</view>
              <view v-else class="baseMsg_content">无</view>
            </view>
          </view>
        </template>
        <template v-if="type == 5">
          <view>
            <view class="baseMsg_item">
              <view class="baseMsg_item_title">补卡时间</view>
              <view class="baseMsg_content">{{ listDetail.start_time }}</view>
            </view>
          </view>
        </template>

      </view>
    </view>
    <view style="background-color: #FFFFFF; padding-bottom: 20rpx;"
          v-if="listDetail.result ==10 || listDetail.result ==20">
      <view class="baseMsg_detail">
        <view class="baseMsg_header">
          <view class="baseMsg_header_img">
            <image src="/static/workOverTime/ico_page_@2x.png" style="width: 100%; height: 100%;"></image>
          </view>
          <view class="baseMsg_header_title">
            审批信息
          </view>
        </view>
        <view class="baseMsg_item">
          <view class="baseMsg_item_title">审批人</view>
          <view class="baseMsg_content">{{ listDetail.optname }}</view>
        </view>
        <view class="baseMsg_item">
          <view class="baseMsg_item_title">审批时间</view>
          <view class="baseMsg_content">{{ listDetail.audit_time | yearMonthDateMin }}</view>
        </view>
        <view class="baseMsg_item">
          <view class="baseMsg_item_title">审批意见</view>
          <view class="baseMsg_item_text baseMsg_content" v-if="listDetail.checksm">{{ listDetail.checksm }}</view>
          <view v-else class="baseMsg_content">无</view>
        </view>
      </view>
    </view>
    <!-- <view class="showAll">已显示全部</view> -->
    <view :class="listDetail.result == 10 || listDetail.result == 20 ? 'hideBtn':''">
      <view class="bottom" v-if="!hasAuth">
        <view class="bottom_btn" @tap="revise">
          <view class="bottom_ico">
            <image src="/static/workOverTime/ico_revise.png" style="width: 100%; height: 100%;"></image>
          </view>
          <view class="bottom_text">修改</view>
        </view>
        <view class="bottom_btn" @tap="openPopup">
          <view class="bottom_ico">
            <image src="/static/workOverTime/ico-cancel.png" style="width: 100%; height: 100%;"></image>
          </view>
          <view class="bottom_text">撤销</view>
        </view>
      </view>
      <view class="bottom" v-if="hasAuth">
        <view class="bottom_btn" @tap="adpot(1)">
          <view class="bottom_ico">
            <image src="/static/workOverTime/ico-cancel.png" style="width: 100%; height: 100%;"></image>
          </view>
          <view class="bottom_text">驳回</view>
        </view>
        <view class="bottom_btn" @tap="adpot(0)">
          <view class="bottom_ico">
            <image src="/static/workOverTime/pass.png" style="width: 100%; height: 100%;"></image>
          </view>
          <view class="bottom_text">通过</view>
        </view>
      </view>
    </view>

    <uni-popup type="bottom" ref="popup">
      <view class="pop">
        <view class="pop_title">确认撤回申请吗?</view>
        <view class="pop_title" style="color: #2D89E5;" @tap="revoke">撤回</view>
        <view class="pop_title" style="color: #666666; border-top: 4px solid #F4F5F7;" @tap="close">取消</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {yearMonthDateMin} from '@/utils/time.js'
// 导入API模块
import {get} from '@/api/request.js'
import config from '@/api/config.js'

export default {
  data() {
    return {
      type: 0,
      formData: {
        "_id": '',
        "user_id": uni.getStorageSync('username'),
        "id": ''
      },
      listDetail: {},
      department: [],
      hasAuth: false,
      leaveTitle: '请假'
    }
  },
  onLoad(option) {
    console.log("接收到的路由参数option:", option)
    this.formData._id = parseInt(option._id) || 0;
    this.formData.id = parseInt(option.id) || 0;
    console.log("formData", this.formData)
    this.type = option.type
  },
  filters: {
    yearMonthDateMin
  },
  created() {
    this.getDetail()

  },
  methods: {

    async getDetail() {
      let that = this;
      try {
        const res = await get(config.apiPaths['zhy'].zhyGetDetail, this.formData)
        console.log("获取详情返回的数据", res.data)

        // 修复1：检查返回的数据是否为数组且有内容
        if (Array.isArray(res.data) && res.data.length > 0) {
          console.log("detail数组中的数据", res.data)
          // 从返回的数组中找到与当前ID匹配的记录
          const matchedDetail = res.data.find(item => item._id === this.formData._id );

          // 如果找到了匹配的记录，使用它；否则给一个默认空对象
          that.listDetail = matchedDetail || {};

          // 如果没有找到匹配记录，显示提示
          if (!matchedDetail) {
            uni.showToast({title: '未找到申请记录', icon: 'none'});
          }
        } else if (res.data && typeof res.data === 'object') {
          // 如果后端返回的直接是对象而不是数组，直接使用
          that.listDetail = res.data;
        } else {
          // 没有找到数据时的处理，设置默认空对象
          that.listDetail = {};
          uni.showToast({title: '未找到申请记录', icon: 'none'});
          return;
        }

        // 修复2：处理部门数据，添加空值检查
        that.department = that.listDetail.department && Array.isArray(that.listDetail.department)
            ? that.listDetail.department[0]
            : that.listDetail.department || {};

        // 请假类型处理，添加空值检查
        let leaveid = this.listDetail.leaveid || 0;
        if (leaveid === 1) {
          this.leaveTitle = '请假'
        } else if (leaveid === 2) {
          this.leaveTitle = '年假'
        } else if (leaveid === 3) {
          this.leaveTitle = '病假'
        } else if (leaveid === 4) {
          this.leaveTitle = '事假'
        } else if (leaveid === 5) {
          this.leaveTitle = '产假'
        } else {
          this.leaveTitle = '请假'; // 默认值
        }

      } catch (error) {
        console.error('获取详情失败:', error)
        // 出错时也要确保listDetail不为undefined
        this.listDetail = {};
        uni.showToast({title: '获取详情失败', icon: 'none'})
      }
    },


    adpot(n) {
      uni.navigateTo({
        url: `/pages/formCommon/adpot?status=${n}&id=${this.formData._id}`
      })
    },
    // 同样的方式修改revoke方法
    revoke() {

      // uni.showLoading({
      //   title:"处理中...",
      //   mask:true
      // })
      get(config.apiPaths['zhy'].zhyRemove, this.formData).then((res) => {
        uni.hideLoading()
        this.$refs.popup.close()
        let obj = {
          sid: 0,
          tabIndex: 1
        }
        let pages = getCurrentPages()
        let beforePage = pages[pages.length - 2]
        beforePage.$vm.custom(obj)
        uni.navigateBack({
          delta: 1
        })
      }).catch(error => {
        // uni.hideLoading()
        console.error('撤回失败:', error)
        // uni.showToast({
        //   title: '撤回失败',
        //   icon: 'none'
        // })
      })
    },
    close() {
      this.$refs.popup.close()
    },
    openPopup() {
      this.$refs.popup.open()
    },
    revise() {
      let obj = {
        tabIndex: 0,
        id: this.formData._id
      }
      let pages = getCurrentPages()
      let beforePage = pages[pages.length - 2]
      beforePage.$vm.resvise(obj)
      uni.navigateBack({
        delta: 1
      })
    },
    // 修改hasApproAuth方法
    hasApproAuth() {
      let that = this
      get('/department/had-approval-auth', {
        user_id: uni.getStorageSync('username')
      }).then((res) => {
        if (res.data && res.data.length != 0) {
          that.hasAuth = true
        }
      }).catch(error => {
        console.error('检查权限失败:', error)
      })
    }
  }
}
</script>

<style>
page {
  background-color: #F8F8F8;
  display: block;
}
</style>
<style scoped>
.header {
  background-color: #FFFFFF;
  padding: 30rpx;
  display: flex;
  margin-bottom: 20rpx;
}

.header_img {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
}

.header_name {
  font-size: 36rpx;
  font-weight: bold;
}

.header_status {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: #999999;
  margin-top: 10rpx;
  font-size: 28rpx;
}

.baseMsg {
  padding: 20rpx 30rpx;
  background-color: #FFFFFF;
}

.baseMsg_header {
  display: flex;
  align-items: center;
}

.baseMsg_header_img {
  width: 58rpx;
  height: 58rpx;
  margin-right: 20rpx;
}

.baseMsg_header_title {
  font-weight: bold;
  font-size: 34rpx;
}

.baseMsg_item {
  display: flex;
  margin: 20rpx 0;
}

.baseMsg_item_title {
  color: #999999;
  width: 200rpx;
}

.baseMsg_detail {
  border-top: 1px solid #E5E5E5;
  width: 92%;
  margin: 0 auto;
  background-color: #FFFFFF;
  padding-top: 30rpx;
}

.showAll {
  color: #B2B2B2;
  margin: 0 auto;
  width: 50%;
  text-align: center;
  margin-top: 40rpx;
}

.bottom {
  background-color: #FFFFFF;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: space-around;
}

.bottom_ico {
  width: 48rpx;
  height: 48rpx;
  margin: 0 auto;
}

.bottom_btn {
  align-items: center;
  padding: 20rpx;
}

.bottom_text {
  font-size: 24rpx;
  color: #999999;
}

.baseMsg_item_text {
  width: 500rpx;
}

.hideBtn {
  display: none;
}

.pop {
  /* height: 400rpx; */
  width: 100%;
  background-color: #FFFFFF;
}

.pop_title {
  color: #999999;
  text-align: center;
  width: 100%;
  padding: 40rpx 0;
  border-bottom: 1px solid #F4F5F7;
}

.baseMsg_content {
  width: 700rpx;
}
</style>
